<template> 
    <div class="recipe-page">
        <div class="detail-content">
            <r-site @jump="jumpSite(detailData)" payLink="true" :item="siteObj" v-if="siteObj"></r-site>
            <div class="site-null clear-both"  v-if="!siteObj" @click="jumpSite(detailData)">
                <span class="text float-left">收货地址</span>
                <i class="icon iconfont iconfont-jiajianzujianjiahao float-right"></i>
            </div>
            <cf-content :item="detailData" :doctor="detailData.doctor"></cf-content>
            <cf-transport :item="detailData"></cf-transport>
        </div>
        
        <div class="footer text-center">
            <div class="price item">合计:<span>￥{{detailData.amount}}</span></div>
            <div class="btn item" @click="subPay(detailData)">立即支付</div>
        </div>
    </div> 
</template>

<script>
import rSite from '@/components/tpl/site' 
import cfContent from '@/components/tpl/chufang/cf-content'
import cfTransport from '@/components/tpl/chufang/transport'  
import * as api from '@/utils/api'
import store from './store'  
export default {
    onLoad (opt){   
        this.getDetailList(opt.orderId1);   
    },
    onShow(){
        this.siteObj=store.state.paySiteList
    },
    components: { 
        rSite,
        cfContent,
        cfTransport
    }, 
    data () {
        return {
            detailData:{},
            siteObj:'',
            siginData:{}
        }
    },
    methods:{
        getSingKey(id){
            let vm = this;
            let body={
                model: 'Orders',   //---处方单为Orders
                id: id,  //---或者生成处方单的id
                openid:wx.getStorageSync('opendId')
            };
            api.payWeChatPay(body).then(res=>{
                if(res.data.code==200){
                   vm.siginData=res.data.data; 
                } 
            })
        },
        subPay(item){
            let vm = this;
            wx.requestPayment({
                timeStamp: vm.siginData.timestamp,
                nonceStr: vm.siginData.nonceStr,
                package: vm.siginData.package,
                signType: 'MD5',
                paySign: vm.siginData.paySign,
                success:function(res){
                    let url = `./../pay-result/main?payId=1`;
                    wx.navigateTo({url})  
                },
                fail:function(res){
                    let url = `./../pay-result/main?payId=2`;
                    wx.navigateTo({url})    
                }
            })
        },
        jumpSite(val){
            store.state.orderNo=val.id;
            let url = `./../site-list/main`;
            wx.navigateTo({url})  
        },
        getDetailList(id){
            let vm = this;
            let body={
                model: "Orders", 
                with:{
                    "0":"doctor",
                    "1":"address"
                },
                condition:{
                    id:id
                } 
            }; 
            api.getInfoById(body).then(res=>{
                if(res.data.code==200){
                    vm.getSingKey(res.data.data.id);
                    let arrItem=res.data.data; 
                    if(arrItem.freight){   
                        arrItem.amount=parseFloat(arrItem.freight)+parseFloat(arrItem.order_price);
                    }else{
                        arrItem.amount= arrItem.order_price;
                    } 
                    vm.detailData=arrItem; 
                    vm.siteObj=arrItem.address;
                    store.state.paySiteList=arrItem.address;
                } 
            })
        },
    }, 
}

</script>
 
<style scoped lang="scss">
.recipe-page{ 
    .detail-content{
    padding:30rpx;
    box-sizing:border-box;
    }
    .site-null{
        width:100%;
        font-size:28rpx;
        background:#fff;
        padding:30rpx;
        box-sizing:border-box;
        border-radius:10rpx;
        margin-bottom:20rpx;
        .text{
            font-size:28rpx;
            color:#9D9D9D;
        }
        .icon{
            color:#CD4640;
        }
    }
    .footer{
        display:flex; 
        position:fixed;
        bottom:0;
        width:100%;
        height:100rpx;
        line-height:100rpx;
        background:#fff;
        .item{
            flex:1;
            height:100%;
        }
        .price{
            font-size:28rpx;
            span{
                color:#CD4640;
                font-size:30rpx;
            }
        }
        .btn{ 
            background:#CD4640;
            color:#fff;
            &:active{
                background-color:rgba(205,70,64,0.5)
            }
        }
    }
 
} 
</style>
